<template>
  <el-row style="padding:15px 0">
    <el-col :span="4"><div style="text-align:right;padding:3px 10px 0 0">{{title}}</div></el-col>
    <el-col :span="16">
      <div class="DJprogress">
        <div class="backDiv"></div>
        <div class="processDiv"  :class="color" :style="{width:stylePercent}"></div>
        <span class="goal">目标值：{{progressData.TargetValue}}{{units}}</span>
        <span class="actual">实际完成值：<span :class="color">{{progressData.value}}</span>{{units}}</span>
        <span v-if="showTags.length>0"><span v-for="(tag,i) of showTags" :key="i" class="actual">{{tag.title}}：<span>{{tag.value}}</span></span></span>
        <div class="ratio" :class="color" :style="{left:stylePercent}">{{percent}}</div>
      </div>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>
</template>

<script>

export default {
  props: {
    progressData: {
      type: Object,
      required: true
    },
    color: {
      type: String,
      default: 'green'
    },
    title: {
      type: String,
      default: ''
    },
    units: {
      type: String,
      default: '元'
    },
    showTags: {
      type: Array,
      default: ()=>[]
    },
  },
  data() {
    return {
      percent:"0.00%",
      stylePercent:"0%",
      ratio:0
    }
  },
  watch:{
    progressData: {
      deep: true,
      handler(val) {
        this.getRatio()
      }
    },    
  },
  created(){
    this.getRatio();
  },
  methods:{
    getRatio(){
      if(this.progressData.percent){
        this.percent=this.progressData.percent
      }else if(this.progressData.value!=0&&this.progressData.TargetValue!=0){
        this.ratio=((this.progressData.value/this.progressData.TargetValue)*100).toFixed(2);
        this.percent=this.ratio+"%"
      }else{
        this.percent="0.00%"
        this.ratio=0
      }
      if(this.progressData.stylePercent){
        this.stylePercent=this.progressData.stylePercent
      }else{
        this.stylePercent=this.ratio<0?"0%":this.ratio>100?"100%":this.ratio+"%"
      }
    }
  }
}
</script>
